<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>5.注册全局组件</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../vue.js"></script>
    <style>
      .hello {
        background-color:  red;
        color: yellow;
        border: 3px solid green;
        border-radius: 10px;
        box-shadow: 0 0 10px;
      }
    </style>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo"></div>

    <script type="text/javascript">
      // 创建一个Hello组件
      let Hello = Vue.extend({
        name:'Hello',
        template:`<h2 class="hello">欢迎，欢迎，热烈欢迎！</h2>`
      })

      // 全局注册组件（一次注册，到处可用）
      Vue.component('Hello',Hello)

      // 创建Person组件
      let Person = Vue.extend({
        name:'Person',
        template:`
          <div>
            <Hello/>
            <h2>人员信息</h2>
            <h4>姓名：{{pname}}</h4>
            <h4>年龄：{{age}}</h4>
            <button @click="showPerson">查看人员信息</button>
          </div>
        `,
        data(){
          return {
            pname:'强哥',
            age:18
          }
        },
        methods:{
          showPerson(){
            alert(`我叫${this.sname}今年刚满${this.age}岁`)
          }
        }
      })

      // 创建School组件
      let School = Vue.extend({
        name:'School',// School组件不管后期注册时叫什么名，工具里永远呈现的是：School
        template:`
          <div>
            <Hello/>
            <h2>学校信息</h2>
            <h4>校名：{{sname}}</h4>
            <h4>地址：{{address}}</h4>
            <button @click="showSchool">点我提示学校信息</button>
          </div>
        `,
        data(){
          return {
            sname:'尚硅谷',
            address:'宏福科技园',
          }
        },
        methods:{
          showSchool(){
            alert(`${this.sname}坐落于${this.address}`)
          }
        }
      })

      // 创建App组件
      let App = Vue.extend({
        name:'App',
        template:`
          <div>
            <Hello/>
            <Person/>
            <hr>
            <School/>
          </div>
        `,
        // 局部注册
        components:{Person,School}
      })

      // 创建vm
      new Vue({
        el:'#demo',
        // 局部注册
        components:{App},
        template:'<App/>'
      })
    </script>
  </body>
</html>